<template>
  <el-container  class="height100 marginL16   domainMainContent containerHeight">
    <chunk_item ref="chunkItem"  v-if="showMode=='LIST'" :headerArr="headerArr" :searchItemArr="searchItemArr" :tableArr="tableArr" :searchChilddata.sync="searchdata"  @onChunkBtnClick="onChunkBtnClick"/>

    <!-- 新建的时候出现 -->
    <calendar_edit :visible.sync="newCalendar" @new-ok="onNewCalendarOk"  :detail="content" :nowOption="nowOption" v-if="newCalendar"/>
    
    <!-- 编辑的时候出现 -->
    <dialog_item :dialogTitle="$t('edit_calendar')" @onBtnDialogClick="onBtnDialogClick" :visible.sync="detailVisible" dialogClass='padding0Dialog' :btnDialogArr="[
      {label:$t('cancel'),type:'plain',name:'cancel'},{label:$t('calendarWorkWeek'),name:'calendarWorkWeek'},{label:$t('calendar_day'),name:'calendar_day'} ]">
      <calendar_detail  
        ref="editDetail"  
        :detail="detail" 
        v-if="detailVisible"
        />
    </dialog_item>


  </el-container>
</template>

<script>
import calendar_edit from "@/components/calendar_edit.vue";
import calendar_detail from "@/components/calendar_detail.vue";
import chunk_item from "@/components/common/chunk_item.vue"
export default {
  components:{
    calendar_edit,
    calendar_detail,
    chunk_item
  },
  created() {
    this.searchTableData();
    //关于标题的处理
    this.headerArr={iconfont:'icon-icon_gzrl_off',content:this.$t('calendarList'),btnArr:[{type:'primary',name:'new',label:this.$t('new')},{type:'danger',name:'del',label:this.$t('del')}] }
    //在这里对传过去的参数赋值
    this.searchItemArr=[{type:'input',name:'name',placeholder:this.$t('calendarName')}]
  },
  provide() {
    return {
      changeMultiSelection: this.changeMultiSelection
    };
  },
   mounted(){
    
  },
  data() {
    return {
      calendars: [],
      searchdata:{
        domainid: this.$route.query.domainid,
        currpage: 1,
        pagelines: 10,
        data:{
          name:"",
        }
      },
      multipleSelection:[],
      newCalendar:false,
      content:{
        name:"",
        _calendarid:"",
        remark:""
      },
      nowOption:"change",
      calendarsSort:[],
      showMode:"LIST",
      detail:[],
      tableListConHeight:null,
      detailVisible: false, // 日历详情弹窗
      searchItemArr:[],
      headerArr:{},
      tableArr: {
        tableColumns: [
          { prop: "name", label: this.$t("calendarName") },
          { prop: "remark", label: this.$t("description") },
          {
            prop: "level",
            label: this.$t("operating"),
            isBtn: {
              show: "button",
              btnArr: [
                {
                  type: "plain",
                  btnName: this.$t("edit"),
                  btnMethods: "edit",
                },
              ],
            },
          },
        ],
      },
    };
  },
  methods:{
    changeMultiSelection(data){
      this.multipleSelection=data
    },
    onBtnDialogClick(name){
      if(name=='calendarWorkWeek'){
        this.onStandardDayBtn()
      }else if(name=='calendar_day') {this.onSpecialBtn()}
    },
    onChunkBtnClick({name,data}){
        if(name=='new'){this.onAddBtnClick()}
        else if(name=='del'){this.onDeleteBtnClick()}
        else if(name=='rowClick'){this.onRowClick(data)}
        else if(name=='tableClick'){if(data.rowName=='edit'){this.onEditBtnClick(data.rowData)}}
        else{
          this.searchdata={
            ...this.searchdata,
            ...data
          }
          this.searchTableData()
        }
    },
    searchTableData(){
      this.$api.getDomainCalendars(
        this.searchdata,
        {
          onSucess: resp => {
            this.calendars = resp.data.data;
            //这里对table的传值赋值
            this.tableArr={
              ...this.tableArr,
              ...this.calendars,
              type:'calendars',
            }
            this.$set(this.searchdata,'currpage',this.tableArr.pageNo)
            this.$refs.chunkItem.cancelInterval()
          }
        }
      );
    },
    onAddBtnClick(){
      this.content={};
      this.nowOption="new"
      this.newCalendar=true;
    },
     onDeleteBtnClick(){
        this.$api.deleteCalendars({
            domainid: this.$route.query.domainid,
            data:this.multipleSelection
          },{
            onSucess:resp =>{
              if(resp.data.errcode==0){
                this.$refs.chunkItem.clearSelection()//手动清除
                this.$message({
                    showClose: true,
                    message: this.$t('msg_del_success'),
                    type: "success"
                  });
                this.searchTableData();
              }else{
                this.$message({
                  showClose: true,
                  message: resp.data.errmsg,
                  type: "error"
                });
              }
            },
            onError:function(){
              this.$message({
                showClose: true,
                message: this.$t('msg_del_failed'),
                type: "error"
              }); 
            }
          })
    },
    onNewCalendarOk(){
      this.searchTableData();
    },
    onEditBtnClick(row) {
      this.content=JSON.parse(JSON.stringify(row));
      this.nowOption="change";
      this.newCalendar=true;
    },
    onRowClick(row){
      this.detail=row;
      this.detailVisible = true;
    },
    // 显示工作周
    onStandardDayBtn(){
      this.$refs.editDetail.onStandardDayBtn()
    },
    // 显示例外日
    onSpecialBtn(){
      this.$refs.editDetail.onSpecialBtn()
    }
  }

};
</script>

<style>
</style>